<template>
  <div>
    <template v-for="(item, index) in dataForm[attrName]">
      <div :key="index" style="display: flex;position: relative; margin-top: 5px;">
        <el-select v-model="item[listName]" filterable clearable multiple :placeholder="listPlaceholder" @input="forceUpdate"
                   style="margin-right: 5px;">
          <el-option v-for="item in list" :key="item.id" :label="item.name" :value="item.id">
          </el-option>
        </el-select>


        <el-input v-model="item[numberName]" :placeholder="numberPlaceholder"

                         @input="forceUpdate"
                         style="margin-right: 5px;"></el-input>

        <el-input-number v-model="item[radioName]" :placeholder="numberPlaceholder"
                         type="number"
                         controls-position="right"
                  @input="forceUpdate"
                  style="margin-right: 5px;"></el-input-number>

<!--        <el-radio v-for="(item1, i) in radioList" v-model="item[radioName]"-->
<!--                  :border="radioBorder" :label="item1.label"-->
<!--                  :disabled="disabled"-->
<!--                  :key="i" @change="changedCallback"-->
<!--                  style="margin-top: 10px;"-->
<!--        >{{ item1.text }}-->
<!--        </el-radio>-->
        <el-tooltip class="item" effect="dark" content="新增"
                    placement="bottom">
          <a class="el-icon-circle-plus-outline" @click="addOneLine(index+1)"
             style="position: absolute;right: -17px; top: 10px;"></a>
        </el-tooltip>
        <el-tooltip v-if="dataForm[attrName].length > 1" class="item" effect="dark" content="删除" placement="bottom">
          <a class="el-icon-remove-outline" @click="deleteOneLine(index)"
             style="position: absolute;right: -35px; top: 10px;"></a>
        </el-tooltip>
      </div>
    </template>
  </div>
</template>

<script>
import basicMixins from './basicMixins'

export default {
  name: 'normalListAndNumberAndRadio',
  mixins: [basicMixins],
  data() {
    return {}
  },
  props: {
    list: {
      type: Array,
      required: true,
      default: () => []
    },
    otherAttrs: {
      type: Array,
      default: () => []
    },
    listPlaceholder: {
      type: String,
      default: ''
    },
    listName: {
      type: String,
      default: () => []
    },
    numberName: {
      type: String,
      default: 'value'
    },
    radioName:{
      type: String,
      default: 'radioName'
    },
    numberPlaceholder: {
      type: String,
      default: ''
    },
    disabled: {
      type: Boolean,
      default: false
    },
    radioList: {
      type: Array
    },
    radioBorder: {
      type: Boolean
    },
    changedCallback: {
      type: Function,
      default: () => {
      }
    }
  },
  methods: {
    addOneLine(index) {
      const item = {}
      item[this.listName] = []
      item[this.numberName] = ''
      item[this.radioName] = 0

      this.otherAttrs.forEach(attr => {
        item[attr] = ''
      })
      this.dataForm[this.attrName].splice(index, 0, item)
    },
    deleteOneLine(index) {
      this.dataForm[this.attrName].splice(index, 1)
    }
  },
  created() {
    this.dataForm[this.attrName] = []
    this.addOneLine(0)
  }
}
</script>

<style scoped>
</style>
